﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery.Canvas</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <link href="../Content/font-awesome.min.css" rel="stylesheet" />
    <link href="../lib/jQuery.canvas.css" rel="stylesheet" />
    <script src="../lib/jQuery.canvas.js"></script>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.min.js"></script>
</head>

<body class="container-fluid">
    <div class="panel">
        <div class="panel-heading">
            画布
        </div>
        <div class="panel-body">
            <img class="myCanvas" src="../Images\Jellyfish.jpg" />
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">
            定制工具栏
        </div>
        <div class="panel-body ">
            <div style="line-height:1.5em;height:auto;">
                <span >
                    <input type="checkbox" id="pencil" checked="checked" />
                    <label for="pencil">画笔工具</label>
                </span>
                <span >
                    <input type="checkbox" id="text" checked="checked" />
                    <label for="text">文字工具</label>
                </span> <span >
                    <input type="checkbox" id="colors" checked="checked" />
                    <label for="colors">颜色工具</label>
                </span>
                <span >
                    <input type="checkbox" id="width" checked="checked" />
                    <label for="width">画笔粗细</label>
                </span> <span >
                    <input type="checkbox" id="eraser" checked="checked" />
                    <label for="eraser">橡皮檫</label>
                </span> <span >
                    <input type="checkbox" id="undo" checked="checked" />
                    <label for="undo">撤销</label>
                </span><span >
                    <input type="checkbox" id="redo" checked="checked" />
                    <label for="redo">重做</label>
                </span><span >
                    <input type="checkbox" id="clear" checked="checked" />
                    <label for="clear">清除</label>
                </span>
            </div>
            <script type="text/javascript">
                $("input[type=checkbox]").change(function () {
                    //查找用于初始化的元素/Element/对象
                    var $c = $("img.myCanvas");
                    var ckd = [];
                    //获取已选工具
                    $("input[type=checkbox]:checked").each(function () {
                        var v = this.id;
                        ckd.push(v);
                    });
                    //销毁原画布
                    $c.myCanvas("dispose");
                    //初始化画布
                    $c.myCanvas({ tools: ckd });
                })
            </script>
        </div>
    </div>
</body>

</html>